<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
<!--       <el-form-item>-->
<!--          <el-select v-model="doctorQueryVo.level" clearable placeholder="所属机构">-->
<!--              <el-option :value="1" label="高级讲师"/>-->
<!--              <el-option :value="2" label="首席讲师"/>-->
<!--          </el-select>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-select v-model="searchCriteria.other.type" clearable placeholder="类型">
          <el-option :value="0" label="免费"/>
          <el-option :value="1" label="付费"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchCriteria.otherLike.name" placeholder="项目名"/>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="getList(1)">查询</el-button>
      <el-button type="default" @click="searchCriteria={other: {},otherLike: {}}">清空</el-button>

        <el-button type="primary" @click="addForm={},addFormView=true">新增</el-button>



    </el-form>

    <!--数据显示列表-->
    <el-table :data="datalist" fit highlight-current-row>


      <el-table-column prop="id" label="项目编号" width="100"></el-table-column>
      <el-table-column prop="name" label="项目名称" width="100" ></el-table-column>
      <el-table-column prop="times" label="次数"  width="100"></el-table-column>
      <el-table-column prop="type" label="项目类型" width="100">
        <template slot-scope="scope">
          {{scope.row.type==0?'免费':'付费'}}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="项目原价（元）"  width="150"></el-table-column>
      <el-table-column prop="introduce" label="项目介绍"  width="460"></el-table-column>
      <el-table-column label="操作" width="390">
        <template slot-scope="scope">

            <el-button  type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row.id)">修改</el-button>

          <el-button  type="text" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[ 3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="新增项目" :visible.sync="addFormView">
      <el-form :model="addForm" ref="addForm" label-width="100px" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="服务次数" prop="times">
              <el-input v-model="addForm.times"></el-input>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="type">
              <el-select v-model="addForm.type" placeholder="请选择项目类型" clearable>
                <el-option label="免费" value="0"></el-option>
                <el-option label="付费" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

              <el-col :span="9">
                <el-form-item label="项目原价/元" prop="price">
                  <el-input v-model="addForm.price"></el-input>
                </el-form-item>

              </el-col>


        </el-row>


        <el-form-item label="服务介绍" prop="introduce">
          <el-input type="textarea" v-model="addForm.introduce"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddForm">创建</el-button>
          <el-button @click="addForm={}">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑项目" :visible.sync="editFormView">
      <el-form :model="editForm" ref="editForm" label-width="100px" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="editForm.name"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="服务次数" prop="times">
              <el-input v-model="editForm.times"></el-input>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="type">
              <el-select v-model="editForm.type" clearable>
                <template slot-scope="scope" >
                  <el-option :label="'免费'" value='0'></el-option>
                  <el-option :label="'付费'" value='1'></el-option>
                </template>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="项目原价/元" prop="price">
              <el-input v-model="editForm.price"></el-input>
            </el-form-item>

          </el-col>


        </el-row>


        <el-form-item label="服务介绍" prop="introduce">
          <el-input type="textarea" v-model="editForm.introduce"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitEditForm">修改</el-button>
          <el-button @click="editForm={}">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>







  </template>



<script>
import axios from 'axios'
import doctor from '../../api/admin/doctor'
export default {
  data(){
    return{
      searchCriteria:{
        other: {},
        otherLike: {}
      },
      currentPage:1,
      pageSize:3,
      datalist: [],
      total:0,
      addFormView:false,
      editFormView:false,
      addForm:{},
      editForm:{}
    }
  },
  created() {
    this.getList();
  },
  methods:{
    submitAddForm(){
      axios.post('http://localhost:8080/item',this.addForm).then(r=>{
        this.$message(r.data.message);
        this.getList();
      })
      this.addFormView=false;
      this.getList();
    },
    edit(id){
      axios.post('http://localhost:8080/item/search/1/1',{'other':{'id':id}}).then(r=>{
        this.editForm=r.data.data.data[0];
        this.editFormView=true;
        this.editForm.type+=''
      }).catch(e=>{
        console.log(e);
        this.getList();
      })
    },
    submitEditForm(){
      axios.put('http://localhost:8080/item',this.editForm).then(r=>{
        this.$message(r.data.message);
        this.getList();
      })
      this.editFormView=false;

    },
    //分页查所有
    getList(i){
      if(i==1)this.currentPage=1;
      axios.post('http://localhost:8080/item/search/'+this.currentPage+'/'+this.pageSize, this.searchCriteria).then(res=>{
        console.log(res.data)
        this.datalist=res.data.data.data;
        this.total=res.data.data.total;
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getList();
    },
    handleCurrentChange(currentPage){
      console.log(currentPage)
      this.currentPage=currentPage;
      this.getList();
    },
    //删除
    handleRemove(row){
      this.$confirm("是否确定删除？", "提示", {type: "warning"})
        .then(() => {
          // 点击了确定删除
          axios.delete('http://localhost:8080/item/'+row.id).then(res => {
            // 显示提示信息
            this.$message.success(res.data.message);
            // 重新查询分页数据

            if(this.datalist.length==1) {
              this.currentPage--;

            }

            this.getList();
          });
        })
        .catch(() => {
          // 点击取消删除
          this.$message.info("取消删除操作");
        });
    },
    downlaod(){
      let list=[];
      trainer.search().then(res=>{
        list=res.data;
      })
      trainer.download(list).then(res=>{
        this.$message.success("操作成功")
      })
    },
    // 导出数据
    handleExport(){
      console.log("===导出数据===");
      axios({
        method: 'post',
        url: "http://localhost:8080/doctor/export",
        responseType: 'blob', // 返回类型为数据流
        data: this.trainerQueryVo // 需要传参的话，在这传
      }).then(res => {
        if (res && res.data) {
          // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
          fileDownload(res.data, "培训师.xlsx")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
